<template>
  <a-card class="container" :body-style="{padding: '0px 0px'}" :bordered="false">
    <a-space class="operator">
      <a-button @click="back" type="primary">返回上一页</a-button>
    </a-space>
    <a-form-model ref="form" :model="form" :layout="layout" style="margin-top:24px" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item
        label="组名称"
        prop="title"
      >
        <a-input v-model="form.title" placeholder="请填写组名称" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item
        label="组权限"
        prop="auths"
      >
        <a-tree-select
          :value="form.auths"
          style="width: 100%"
          :tree-data="treeData"
          treeCheckable
          treeCheckStrictly
          :show-checked-strategy="SHOW_ALL"
          search-placeholder="请选择组权限"
          @change="treeSelectChange"
          :maxTagCount="10"
        />
      </a-form-model-item>
      <a-form-model-item
        label="备注"
      >
        <a-textarea v-model="form.remark" />
      </a-form-model-item>
      <a-form-model-item
        label="状态"
        prop="status"
      >
        <a-switch v-model="form.status" checked-children="开启" un-checked-children="关闭" default-checked />
      </a-form-model-item>
      <a-form-model-item
        label="优化师组"
        prop="is_opt"
      >
        <a-switch v-model="form.is_opt" checked-children="是" un-checked-children="否" default-checked />
      </a-form-model-item>
      <a-form-model-item
        label="超级优化师组"
        prop="is_superopt"
      >
        <a-switch v-model="form.is_superopt" checked-children="是" un-checked-children="否" default-checked />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="btn_wrapperCol">
        <a-button type="primary" @click="onSubmit" :loading='loading'>
          提交
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import { TreeSelect } from 'ant-design-vue';
import {getAuthPagelist,addGroups} from '@/api/modules/permission'
const SHOW_ALL = TreeSelect.SHOW_PARENT;

export default {
  name:'groupAdd',
  data(){
    return{
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
      btn_wrapperCol:{ span: 13, offset: 7 },
      layout:'horizontal', //'horizontal'|'vertical'
      form:{
        title:'',
        auths:[],
        remark:'',
        status:true,
        is_opt: false,
        is_superopt: false,
      },
      treeData:[],
      SHOW_ALL,
      rules:{
        title:[
          {required: true,message: '请填写组名称', trigger: 'blur'}
        ],
      },
      loading:false,
    }
  },
  created(){
    this.getAuthPagelist()
  },
  methods:{
    getAuthPagelist(){
      getAuthPagelist({}).then((res) => {
        if(res.errcode == 0){
          let treeData = []
          for(let item of res.data){
            let children = []
            if(item.child){
              for(let itemChild of item.child){
                children.push({
                  ...itemChild,
                  title: item.title + '-' + itemChild.title,
                  value: itemChild.id,
                  key: itemChild.id,
                })
              }
            }
            treeData.push({
              ...item,
              value: item.id,
              key: item.id,
              children: children
            }) 
          }
          // console.log(treeData)
          this.treeData = treeData
        }
      }).catch(() => {
        
      });
    },
    onSubmit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          this.loading = true
          let form = JSON.parse(JSON.stringify(this.form))
          form.status = form.status?1:0
          form.is_opt = form.is_opt?1:0
          form.is_superopt = form.is_superopt?1:0
          let auths = []
          for(let item of this.form.auths){
            auths.push(item.value)
          }
          form.auths = auths.join()
          console.log(form)
          addGroups(form).then((res) => {
            this.loading = false
            if(res.errcode == 0){
              this.$message.success('添加成功')
              this.back()
            }
          }).catch(() => {
            this.loading = false
          });
        }
      })
    },
    treeSelectChange(val, label, extra){
      // console.log(val, label, extra)
      let value = JSON.parse(JSON.stringify(val))
      //单向联动
      let triggerValue = extra.triggerValue
      let f = this.treeData.find(e=>e.value == triggerValue)
      if(f){
        if(extra.checked){
          for(let i of f.children){
            let f_val = value.find(e=>e.value == i.value)
            if(f_val){continue}
            value.push({
              label: i.title,
              value: i.value,
            })
          }
        }else{
          for(let i of f.children){
            let f_index = value.findIndex(e=>e.value == i.value)
            if(f_index == -1){continue}
            value.splice(f_index,1)
          }
        }
      }else{
        // 获取父节点id
        if(extra.checked){
          let pid = extra.triggerNode.dataRef.pid
          let f2 = this.treeData.find(e=>e.id == pid)
          let f_val = value.find(e=>e.value == f2.value)
          if(!f_val){
            value.push({
              label: f2.title,
              value: f2.value,
            })
          }
        }
      }
      // console.log(value)
      this.form.auths = value
    },  
    back(){
      this.$emit('update:mod','normal')
    },
  },
  watch:{
    'form.is_opt'(res){
      if(res){
        this.form.is_superopt = false
      }
    },
    'form.is_superopt'(res){
      if(res){
        this.form.is_opt = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container{
}
</style>